<template>
  <div class="home-page">
    <!-- 轮播图区域 -->
    <div class="carousel-container">
      <div class="carousel">
        <!-- 轮播图内容 -->
        <div class="carousel-item active">
          <img src="@/assets/carousel/1.jpg" alt="山河大学宣传图1">
          <div class="carousel-caption">
            <h3>欢迎来到山河大学虚拟校园</h3>
            <p>一个为学生提供学习、交流、发展的平台</p>
            <p>仅为学习和交流之用，不涉及任何形式的教学或考试</p>
          </div>
        </div>
        <!-- 可以添加更多轮播项 -->
      </div>
    </div>
    
    <!-- 新闻和通知区域 -->
    <div class="news-notice-container">
      <div class="container">
        <div class="row">
          <!-- 学校新闻(左侧) -->
          <div class="news-section col">
            <h2 class="section-title">学校新闻</h2>
            <ul class="news-list">
              <li class="news-item">
                <a href="#" class="news-link">
                  <span class="news-date">2023-10-15</span>
                  <span class="news-title">我校举办2023年秋季运动会</span>
                </a>
              </li>
              <li class="news-item">
                <a href="#" class="news-link">
                  <span class="news-date">2023-10-10</span>
                  <span class="news-title">山河大学与国外高校签署合作协议</span>
                </a>
              </li>
              <li class="news-item">
                <a href="#" class="news-link">
                  <span class="news-date">2023-10-05</span>
                  <span class="news-title">我校科研团队获得国家级重大项目资助</span>
                </a>
              </li>
              <li class="news-item">
                <a href="#" class="news-link">
                  <span class="news-date">2023-09-30</span>
                  <span class="news-title">我校隆重举行建校60周年庆典活动</span>
                </a>
              </li>
              <li class="news-item">
                <a href="#" class="news-link">
                  <span class="news-date">2023-09-25</span>
                  <span class="news-title">2023级新生开学典礼顺利举行</span>
                </a>
              </li>
            </ul>
            <a href="#" class="more-link">更多新闻 →</a>
          </div>
          
          <!-- 学校通知(右侧) -->
          <div class="notice-section col">
            <h2 class="section-title">学校通知</h2>
            <ul class="notice-list">
              <li class="notice-item">
                <a href="#" class="notice-link">
                  <span class="notice-date">2023-10-18</span>
                  <span class="notice-title">关于开展2023年冬季学期选课工作的通知</span>
                </a>
              </li>
              <li class="notice-item">
                <a href="#" class="notice-link">
                  <span class="notice-date">2023-10-15</span>
                  <span class="notice-title">2023年国庆节放假安排通知</span>
                </a>
              </li>
              <li class="notice-item">
                <a href="#" class="notice-link">
                  <span class="notice-date">2023-10-10</span>
                  <span class="notice-title">关于做好秋季学期学生心理健康教育工作的通知</span>
                </a>
              </li>
              <li class="notice-item">
                <a href="#" class="notice-link">
                  <span class="notice-date">2023-10-05</span>
                  <span class="notice-title">校园网络系统升级维护通知</span>
                </a>
              </li>
              <li class="notice-item">
                <a href="#" class="notice-link">
                  <span class="notice-date">2023-09-30</span>
                  <span class="notice-title">关于开展消防安全知识培训的通知</span>
                </a>
              </li>
            </ul>
            <a href="#" class="more-link">更多通知 →</a>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 学校风云人物 -->
    <div class="celebrities-section">
      <div class="container">
        <h2 class="section-title">学校风云人物</h2>
        <div class="celebrities-grid">
          <div class="celebrity-item">
            <img src="@/assets/celebrities/名誉校长杜甫.png" alt="风云人物1">
            <div class="celebrity-info">
              <h3>名誉校长杜甫</h3>
              <p>山河大学名誉校长</p>
            </div>
          </div>
          <div class="celebrity-item">
            <img src="@/assets/celebrities/韩愈.jpg" alt="风云人物2">
            <div class="celebrity-info">
              <h3>韩愈教授</h3>
              <p>文学院院长</p>
            </div>
          </div>
          <div class="celebrity-item">
            <img src="@/assets/celebrities/扁鹊.png" alt="风云人物3">
            <div class="celebrity-info">
              <h3>扁鹊教授</h3>
              <p>医学院院长</p>
            </div>
          </div>
          <div class="celebrity-item">
            <img src="@/assets/celebrities/沈括.webp" alt="风云人物4">
            <div class="celebrity-info">
              <h3>沈括教授</h3>
              <p>工学院院长</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 专题网站 -->
    <div class="topics-section">
      <div class="container">
        <h2 class="section-title">专题网站</h2>
        <div class="topics-grid">
          <a href="#" class="topic-card">
            <img src="@/assets/topics/1.png" alt="专题1">
            <div class="topic-info">
              <h3>招生专题</h3>
              <p>了解最新招生政策和报考指南</p>
            </div>
          </a>
          <a href="#" class="topic-card">
            <img src="@/assets/topics/2.png" alt="专题2">
            <div class="topic-info">
              <h3>就业指导</h3>
              <p>就业信息与职业发展规划</p>
            </div>
          </a>
          <a href="#" class="topic-card">
            <img src="@/assets/topics/3.png" alt="专题3">
            <div class="topic-info">
              <h3>学术科研</h3>
              <p>科研成果与学术交流</p>
            </div>
          </a>
          <a href="#" class="topic-card">
            <img src="@/assets/topics/4.png" alt="专题4">
            <div class="topic-info">
              <h3>校园文化</h3>
              <p>丰富多彩的校园文化生活</p>
            </div>
          </a>
        </div>
      </div>
    </div>
    
  </div>
</template>

<script>
export default {
  name: 'Home',
  components: {
  },
  data() {
    return {
      // 可以在这里添加轮播图数据等
      carouselItems: [
        // 示例图片，你可以替换为实际的图片路径，后期可改为动态后台获取
        { src: '@/assets/carousel/1.jpg', alt: '轮播图1' },
        { src: '@/assets/carousel/2.jpg', alt: '轮播图2' },
        { src: '@/assets/carousel/3.jpg', alt: '轮播图3' }
       ]
    };
  },
mounted() {
  // 启动自动播放：每3秒切换一次
  this.timer = setInterval(() => {
    this.nextImage(); // 调用下一张方法
  }, 3000); // 3000毫秒 = 3秒
},
beforeUnmount() {
  // 组件销毁前清除定时器
  clearInterval(this.timer);
},
methods: {
  // 切换到下一张
  nextImage() {
    // 如果是最后一张，切换到第一张（取余实现循环）
    this.currentIndex = (this.currentIndex + 1) % this.carouselImages.length;
  },
  // 切换到上一张
  prevImage() {
    // 如果是第一张，切换到最后一张（避免负数索引）
    this.currentIndex = (this.currentIndex - 1 + this.carouselImages.length) % this.carouselImages.length;
  },
  // 手动切换到指定索引（可选，用于点击指示器）
  goToIndex(index) {
    this.currentIndex = index;
  }
}
};
</script>

<style scoped>
.home-page {
  display: flex;
  flex-direction: column;
  margin-top: 70px;
}

/* 轮播图样式 */
.carousel-container {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.carousel {
  width: 100%;
  height: 450px;
  position: relative;
}

.carousel-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.carousel-item.active {
  opacity: 1;
}

.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 20px;
  text-align: center;
}

/* 新闻和通知区域 */
.news-notice-container {
  padding: 40px 0;
}

.container {
  max-width: 90%;
  margin: 0 auto;
  padding: 0 20px;
}

.row {
  display: flex;
  margin: 0 -15px;
}

.col {
  flex: 1;
  padding: 0 15px;
}

.section-title {
  font-size: 22px;
  color: #333;
  border-bottom: 2px solid #0066cc;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.news-list, .notice-list {
  list-style: none;
  padding: 0;
}

.news-item, .notice-item {
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px dashed #e0e0e0;
}

.news-link, .notice-link {
  display: flex;
  text-decoration: none;
  color: #333;
  transition: color 0.3s;
}

.news-link:hover, .notice-link:hover {
  color: #0066cc;
}

.news-date, .notice-date {
  flex: 0 0 100px;
  color: #666;
  font-size: 14px;
}

.news-title, .notice-title {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.more-link {
  display: inline-block;
  margin-top: 15px;
  color: #0066cc;
  text-decoration: none;
  font-weight: bold;
}

/* 风云人物区域 */
.celebrities-section {
  padding: 40px 0;
  background-color: #f9f9f9;
}

.celebrities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.celebrity-item {
  text-align: center;
}

.celebrity-item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  object-position: 50% 25%;
}

.celebrity-info h3 {
  margin: 10px 0 5px;
  font-size: 18px;
}

.celebrity-info p {
  color: #666;
  margin: 0;
}

/* 专题网站区域 */
.topics-section {
  padding: 40px 0;
}

.topics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.topic-card {
  display: block;
  text-decoration: none;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s;
}

.topic-card:hover {
  transform: translateY(-5px);
}

.topic-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  object-position: 50% 25%;
}

.topic-info {
  padding: 15px;
}

.topic-info h3 {
  margin: 0 0 10px;
  color: #333;
}

.topic-info p {
  margin: 0;
  color: #666;
  font-size: 14px;
}


/* 响应式调整 */
@media (max-width: 768px) {
  .row {
    flex-direction: column;
  }
  
  .col {
    margin-bottom: 30px;
  }
  
  .carousel {
    height: 250px;
  }
}
</style>
